<template>
<div class="lunbo">
  <van-swipe lazy-render :autoplay="3000" :touchable="true">
    <van-swipe-item v-for="image in state.images" :key="image">
      <img class="img" :src="image.pic" />
    </van-swipe-item>
  </van-swipe>
</div>
<!--  <p>{{state.songs}}</p>-->
</template>

<script>
import {onMounted, reactive} from "vue";
import service from "@/components/request/request";
import {mapMutations} from "vuex";

export default {
  name: "SwiperTop",
  data(){
    return{

    }
  },
  props:{

  },
  setup(){
    const state = reactive({
      images: [],
      songs:[],
    });
    const methods = {
      //获取 banner
      async fetch() {
        const res =  await service.get("banner?type=2");
        state.images = res.data.banners;
        const songs=await  service.get("/personalized/newsong?limit=10");
        state.songs=songs
      },
      async fun(){
        const pic= await service.get("banner?type=2");
      //async加载方法名前面，await 加载request前面
      }
    };
    onMounted(()=>{
      methods.fetch();
      methods.fun()
    });

    return { state };
  },
  methods:{
      ...mapMutations(["UPDATE","INDEX"])
  },
  mounted() {
    console.log(this.state.songs);
  }
}
</script>

<style scoped>
.lunbo{
   width: 100%;
   height: 10px;
}
.img{
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
}
</style>
